<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="login">
        <h2 id="text">登录</h2>
        <div class="inputBox">
            <input type="text" placeholder="用户名">
        </div>
        <div class="inputBox">
            <input type="password" placeholder="密码">
        </div>
        <div class="inputBox">
            <input type="submit" value="登录" id="btn">
        </div>
        <div class="group">
            <a href="#">忘记密码</a>
            <a href="#">注册</a>
        </div>
    </div>

    <div class="colors">
        <span class="active" style="--clr:#1dd1a1;" onclick="toggleColor('#1dd1a1')"></span>
        <span style="--clr:#ff6b6b;" onclick="toggleColor('#ff6b6b')"></span>
        <span style="--clr:#2e86de;" onclick="toggleColor('#2e86de')"></span>
        <span style="--clr:#f368e0;" onclick="toggleColor('#f368e0')"></span>
        <span style="--clr:#ff9f43;" onclick="toggleColor('#ff9f43')"></span>
    </div>


    <script>
        
        let btn = document.getElementById('btn');
        let text = document.getElementById('text');
            function toggleColor(color){
                document.body.style.background = color;
                // 登录按钮变色
                btn.style.background = color;
                text.style.borderColor = color;

                document.querySelectorAll('span').forEach(function(item){
                    item.classList.remove('active');
                })
                event.target.classList.add('active');
            }

            
        
    </script>
</body>
</html>